<template>
	<view class="guess-section">
		<!-- 空白页 -->
		<view v-if="goodsList.length<1 " class="empty">
			<image src="/static/nodata.jpg" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
				<navigator class="navigator"  url="../../pages/index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
		</view>
		<view v-else v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
			<view class="image-wrapper"><image :src="item.img"></image></view>
			<view class="cont">
				<text class="title clamp1">{{item.name}}</text>
				<text class="price">￥{{item.retail_price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'; 
	
	export default {
		data() {
			return {
				goodsList:[]
			}
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			
			async loadData() {
				// 这里不知道干啥的 先屏蔽掉
				/* let carouselList = await this.$api.json('carouselList');
				this.titleNViewBackground = carouselList[0].background;
				this.swiperLength = carouselList.length;
				this.carouselList = carouselList; */
				let that = this;
				let _param = {token:this.userInfo.token,page:1,size:50};
				
				this.$api.getUrl(this.$api._api.ApiUserCollect,_param,function(res){
					that.goodsList = res.data || [];
				})
			},
			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `/pages/category/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	/* 空白页 */
	.empty{
		position:fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100vh;
		padding-bottom:100rpx;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		background: #fff;
		image{
			width: 240rpx;
			height: 160rpx;
			margin-bottom:30rpx;
		}
		.empty-tips{
			display:flex;
			font-size: $font-sm+2rpx;
			color: $font-color-disabled;
			.navigator{
				color: $uni-color-primary;
				margin-left: 16rpx;
			}
		}
	}
	.guess-section{
		margin-top:25rpx;
		padding: 0 20rpx;
		.guess-item{
			background: #fff;
			border-radius:10rpx;
			overflow: hidden;
			display:flex;
			margin-bottom: 4%;
			padding: 20rpx;
			.image-wrapper{
				width:160rpx;
				height: 160rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					opacity: 1;
				}
			}
			.title{
				font-size:30rpx;
				color: $font-color-dark;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
			}
			.price{
				font-size:32rpx;
				color: $uni-color-primary;
				line-height: 1;
				padding: 0 20rpx;
				font-weight: bold;
				margin-top:10rpx;
				display: block;
			}
		}
	}
</style>
